<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>测试</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link rel="stylesheet" type="text/css" href="aos.css" />
    <script type="text/javascript" src="jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="aos.js"></script>
</head>
<body>
    <div class="header wrap clearfix">
        <div class="header-l fl">logo</div>
        <div class="header-r fr">
            <ul class="header-r-ul clearfix">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">市场前景</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">项目优势</a></li>
            </ul>
        </div>

        <!-- 手机菜单三横线 -->
        <div class="menuph clearfix" id="menuph">
            <div class="point" id="mbtn">
                <span class="navbtn"></span>
            </div>
        </div>

        <!-- 手机导航 -->
        <div class="phone wrap">
            <ul class="phone-ul">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">市场前景</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">项目优势</a></li>
            </ul>
        </div>
    </div>

    <!-- 手机遮罩层 -->
    <div class="phonemeng"></div>

    <!-- 主页内容 -->
    <div class="wrap main1" aos="fade-up">主页内容1</div>
    <div class="wrap main2" aos="fade-right">主页内容2</div>

</body>
</html>

<script>
    AOS.init({
        easing: 'ease-out-back',
        duration: 1000
    });
</script>
<script type="text/javascript">
    // 菜单下拉
    $("#menuph").click(function(){
        $(this).find(".point").toggleClass("active");
        $(".phone").slideToggle();
        $(".phonemeng").toggleClass('active');
    });
</script>